import React, { useEffect, useRef, useState } from 'react';
import './index.less';
import IconFont from '../../iconfont';

interface CollapseProps {
  title: any;
  content: any;
  style?: React.CSSProperties;
}

const Collapse: React.FC<CollapseProps> = ({ title, content, style }) => {
  const prefix = 'well-co';
  const [isOpen, setIsOpen] = useState(false);
  const contentRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    if (isOpen) {
      contentRef.current!.style.maxHeight = '800px';
    } else {
      contentRef.current!.style.maxHeight = '0';
    }
  }, [isOpen]);
  return (
    <div className={`${prefix}-collapse`} style={style}>
      <div onClick={() => setIsOpen(!isOpen)} className={`${prefix}-collapse-title`}>
        {title}
        {isOpen ? <IconFont name="chevron-up" /> : <IconFont name="chevron-down" />}
      </div>
      <div className={`${prefix}-collapse-content`} ref={contentRef}>
        {content}
      </div>
    </div>
  );
};

export default Collapse;
